<template>
  <div class="app-container">
    <el-card>
      <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :offset="0">
          <span>创建考试</span>
        </el-col>
        <el-col :offset="0" :span="2">
          <el-button type="primary" plain size="small" @click="$parent.changePage=true">返回列表</el-button>
        </el-col>
      </el-row>

      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
        <el-form-item label="考试名称" prop="exam_name">
          <el-input
            v-model="formData.exam_name"
            placeholder="请输入考试名称"
            :maxlength="11"
            show-word-limit
            clearable
            prefix-icon="el-icon-mobile"
            :style="{width: '50%'}"
          />
        </el-form-item>
        <el-form-item label="考试类型" prop="exam_type">
          <el-radio-group v-model="formData.exam_type" size="medium">
            <el-radio
              :label="1"
            >阶段测试</el-radio>
            <el-radio
              :label="2"
            >综合测试</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="锁屏方式" prop="lock_screen">
          <el-radio-group v-model="formData.lock_screen" size="medium">
            <el-radio
              :label="1"
            >不锁屏</el-radio>
            <el-radio
              :label="2"
            >锁屏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="归属学科" prop="subject_id">
          <el-select v-model="formData.subject_id" placeholder="请选择归属目录" clearable :style="{width: '30%'}" @change="subjectChange">
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="归属目录" prop="directory_id">
          <el-select v-model="formData.directory_id" placeholder="请选择归属学科" clearable :style="{width: '30%'}" @change="directoryChange">
            <el-option
              v-for="item in directoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="考试时长" prop="exam_time">
          <el-input-number v-model="formData.exam_time" />
        </el-form-item>
        <el-form-item label="试卷信息" prop="main_paper_id">
          <el-select v-model="formData.main_paper_id" :disabled="formData.directory_id===''" placeholder="请选择主考试卷" clearable :style="{width: '30%'}">
            <el-option
              v-for="(item, index) in main_paper_idOptions"
              :key="index"
              :label="item.paper_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm">立即创建</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addExam, getExamPaperList } from '@/api/exam/exam.js'
export default {
  components: {},
  props: {
    subjectList: {
      type: Array,
      default: () => {}
    }

  },
  data() {
    return {
      formData: {
        exam_name: '',
        exam_type: 1,
        lock_screen: 1,
        directory_id: '',
        subject_id: '',
        exam_time: 30,
        main_paper_id: ''
      },
      directoryList: [],
      rules: {
        exam_name: [{
          required: true,
          message: '请输入考试名称',
          trigger: 'blur'
        }],
        exam_type: [{
          required: true,
          message: '考试类型不能为空',
          trigger: 'change'
        }],
        lock_screen: [{
          required: true,
          message: '锁屏方式不能为空',
          trigger: 'change'
        }],
        directory_id: [{
          required: true,
          message: '请选择归属学科',
          trigger: 'change'
        }],
        subject_id: [{
          required: true,
          message: '请选择归属目录',
          trigger: 'change'
        }],
        exam_time: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        main_paper_id: [{
          required: true,
          message: '请选择主考试卷',
          trigger: 'change'
        }]
      },

      main_paper_idOptions: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 获取归属目录,当科目选择变化时,获取目录列表并渲染
    subjectChange(id) {
      this.subjectList.forEach((item) => {
        if (item.id === id) {
          // console.log(item, '每一项')
          this.directoryList = item.children
        }
      })
    },
    // 获取试卷列表
    async directoryChange() {
      const res = await getExamPaperList({
        subject_id: this.formData.subject_id,
        directory_id: this.formData.directory_id,
        show_state: 1
      })
      console.log(res, '试卷====')
      this.main_paper_idOptions = res.list
    },
    // 提交表单
    async submitForm() {
      // 等待表单校验完成
      await this.$refs.elForm.validate()
      // 发起新增请求
      await addExam(this.formData)
      // console.log(res, '新增结果')
      this.$message.success('新增成功')
      this.$parent.changePage = true
      this.$parent.getExamList()
    },
    resetForm() {
      // 重置表单校验
      this.$refs.elForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form{
  margin-top: 50px;
  margin-left: 220px;
}
</style>
